import React, {
  useState, useEffect
} from 'react';
import { Button, Input, Radio, Collapse, Table, Drawer, DatePicker, message, Tooltip } from 'antd';
import { DownOutlined, UpOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
import { Modal } from 'antd'
import axios from 'axios';
import custom from '../assets/css/custom/customIndex.module.css';
import detail from '../assets/css/custom/customDetail.module.css';
import getImg from '../assets/js/getimg';
import term from '../assets/css/custom/customTerm.module.css';
import Toupload from './Toupload';
import { Upload } from "antd";
const options = [
  { label: '有开始的租期', value: '有开始的租期' },
  { label: '租期进行中', value: '租期进行中' },
  { label: '有已结束的租期', value: '有已结束的租期' },
];
import { Calendar } from "antd";

const Manage = () => {



  // 折叠
  const [collapsed, setCollapsed] = useState(true);

  // 添加模态框
  let [showModal, setShowModal] = useState(false);

  // 详情抽屉
  let [showDetail, setShowDetai] = useState(false)

  // 展开
  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };

  // 分页器
  const itemRender = (page, type, originalElement) => {
    if (type === 'prev') {
      return;
    }
    if (type === 'next') {
      return <a>下 一页</a >;
    }

    return originalElement;
  };

  // 接受一行的数据
  const [customListRow, setCustomListRow] = useState({});

  // 表头 
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      key: 'clientName',
      render: (text, row) => <span
        onClick={() => {
          setShowDetai(true)
          console.log(row);

          setCustomListRow(row)
        }}
        className={custom.company}>{text == null ? " -- " : text}</span>,
    },
    {
      title: '有未开始的租期',
      dataIndex: 'noStart',
      key: 'noStart',
      render: (text) => text == '-' ? "未开始" : '有',
    },
    {
      title: '租期进行中',
      dataIndex: 'starting',
      key: 'starting',
      render: (text) => text == '-' ? "否" : '有',
    },
    {
      title: '有已结束的租期',
      dataIndex: 'Isover',
      key: 'Isover',
      render: (text) => text == '-' ? "否" : '有',
    },
    {
      title: '曾驻最大面积(m²)',
      dataIndex: 'maxarea',
      key: 'maxarea',
      render: (text) => text == '-' ? "未住" : text,
    },
    {
      title: '已住天数(天)',
      dataIndex: 'lived',
      key: 'lived',
      render: (text) => text == '-' ? "未住" : text,
    },
    {
      title: '待住天数(天)',
      dataIndex: 'live',
      key: 'live',
      render: (text) => text == '-' ? "未住" : text,
    },
  ];

  // 表格静态数据
  const staticTbale = [
    {
      key: '1',
      company: "北京西天取经",
      Isstart: false,
      running: false,
      Isover: false,
      area: null,
      lived: null,
      tolive: null,
    },
    {
      key: '2',
      company: "张泽良123564456",
      Isstart: true,
      running: true,
      Isover: false,
      area: null,
      lived: 150,
      tolive: 100,
    },
    {
      key: '3',
      company: "华彩科技(北京)有限公司",
      Isstart: true,
      running: true,
      Isover: false,
      area: 80,
      lived: null,
      tolive: null,
    },
    {
      key: '4',
      company: "华采科技(北京)有限公司",
      Isstart: false,
      running: false,
      Isover: false,
      area: 1000,
      lived: null,
      tolive: null,
    },
    {
      key: '5',
      company: "百度网络科技有限公司",
      Isstart: false,
      running: true,
      Isover: false,
      area: 50,
      lived: 80,
      tolive: 50,
    },
    {
      key: '6',
      company: "北京西天取经1",
      Isstart: true,
      running: true,
      Isover: false,
      area: 80,
      lived: 20,
      tolive: 10,
    },
    {
      key: '7',
      company: "北京西天取经2",
      Isstart: false,
      running: false,
      Isover: false,
      area: 100,
      lived: 80,
      tolive: 3,
    },
  ];

  // 数据
  let [customAllData, setCustomAllData] = useState(staticTbale);

  // 请求数据
  const allTableData = () => {
    axios.get('/api/customer').then(res => {
      // console.log(res.data.data);
      setCustomAllData(res.data.data)
    })
  }

  //默认渲染第一页的数据
  useEffect(() => {
    allTableData();
  }, []);


  // 抽屉的tab栏
  let [active, setActive] = useState(0);
  // tab栏
  let tabItem = [
    "客户资料", "租约", "租期", "账单", "报修", "访客"
  ]
  // 删除模态框
  let [delModal, setDelModal] = useState(false);

  // 批量导入模态框
  let [importModal, setImportModal] = useState(false);

  // 基础资料编辑
  let [basisEditModal, setBasisEditModal] = useState(false);

  // 保存的消息提示
  const basisSuccessMsg = () => {
    message.open({
      type: 'success',
      content: '修改成功',
      duration: 3,

    });
  };

  //  添加接口 必填项
  const [addName, setAddName] = useState('');
  const [addType, setAddType] = useState('');

  // 必填项目为空的提示
  // 提示信息(失败)
  const dangerMessage = () => {
    message.open({
      type: 'danger',
      content: '请输入必填项',
      duration: 3,
      style: { color: 'red' },
      icon: <CloseOutlined></CloseOutlined>
    });
  };
  // 提示信息(成功)
  const addSuccessMessage = () => {
    message.open({
      type: 'success',
      content: '添加成功',
      duration: 3,
    });
  };

  // 删除成功
  const adddeleteMessage = () => {
    message.open({
      type: 'success',
      content: '删除成功',
      duration: 3,
    });
  };


  // 提示完全
  let [arrow, setArrow] = useState(false);

  // 租约表格表头
  const leaseColums = [
    {
      title: '租约编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '租约类型',
      dataIndex: 'leaseType',
      key: 'leaseType'
    },
    {
      title: '租赁空间',
      dataIndex: 'space',
      key: 'space'
    },
    {
      title: '租期',
      dataIndex: 'leaseDate',
      key: 'leaseDate'
    },
    {
      title: '租约状态',
      dataIndex: 'leaseStatus',
      key: 'state',
      render: (text) => {
        let color;
        if (text === "未开始") {
          color = "#000";
        } else if (text === "执行中") {
          color = "#75C476";
        } else if (text === "已完成") {
          color = "#F97171";
        } else if (text === "已作废") {
          color = "#BDC5D5";
        } else {
          color = "#000"; // 默认颜色
        }

        return (
          <span style={{ whiteSpace: "nowrap", color }}>
            {text}
          </span>
        );
      }
    },
    {
      title: '招商负责人',
      dataIndex: 'fuzeren',
      key: 'fuzeren'
    }
  ];
  // 租约测试数据 待删除
  const [test, setTest] = useState([
    { id: 'ZY201909231532XXXXX', type: "新租", space: "骏豪中央广场A座3层-302", term: "2019-01-02至2010-09-20", state: "未开始", admin: "张三" },
    { id: 'ZY201909241532XXXXX', type: "新租", space: "骏豪中央广场C座6层-606", term: "2019-01-02至2010-09-20", state: "未开始", admin: "李四" },
    { id: 'ZY201906451532XXXXX', type: "新租", space: "骏豪中央广场B座3层-308", term: "2019-01-02至2010-09-20", state: "已作废", admin: "王五" },
    { id: 'ZY20892231532XXXXX', type: "新租", space: "骏豪中央广场A座3层-308", term: "2019-01-02至2010-09-20", state: "已完成", admin: "丁总1" },
    { id: 'ZY20190929532XXXXX', type: "新租", space: "骏豪中央广场C座2层-207", term: "2019-01-02至2010-09-20", state: "执行中", admin: "丁总2" },
  ]);

  // 租约数据
  const [zuyue, setZuyue] = useState([]);

  // 存储客户名字用于查询
  let [clientName, setClientName] = useState([]);


  // 租期的数据
  const [zuqi, setZuqi] = useState([]);



  // 租期的表头
  let termColum = [
    {
      title: '楼宇',
      dataIndex: 'build',
      key: 'build'
    },
    {
      title: '楼层',
      dataIndex: 'floor',
      key: 'floor',
      render: (text) => (
        <span style={{ whiteSpace: "nowrap" }}>
          {text}
        </span>
      )
    },
    {
      title: '租住空间',
      dataIndex: 'space',
      key: 'space'
    },
    {
      title: '租期开放日',
      dataIndex: 'startDate',
      key: 'startDate'
    },
    {
      title: '租期结束日',
      dataIndex: 'endDate',
      key: 'endDate'
    },
    {
      title: '租住状态',
      dataIndex: 'livestatus',
      key: 'livestatus',
      render: (text) => {
        let color;
        if (text === "租期未开始") {
          color = "#000";
        } else if (text === "租期中") {
          color = "#75C476";
        } else if (text === "租期已结束") {
          color = "#F97171";
        }
        return (
          <span style={{ whiteSpace: "nowrap", color }}>
            {text}
          </span>
        );
      }

    }
  ]


  // 租期的数据
  let termData = [
    { build: "骏豪中央公园广场A座", floor: "三层", space: "301", startDate: "2019-01-02", endDate: "2020-09-20", livestatus: "租期未开始" },
    { build: "骏豪中央公园广场B座", floor: "四层", space: "302", startDate: "2019-01-03", endDate: "2020-09-21", livestatus: "租期中" },
    { build: "骏豪中央公园广场C座", floor: "五层", space: "303", startDate: "2019-01-04", endDate: "2020-09-22", livestatus: "租期未开始" },
    { build: "骏豪中央公园广场D座", floor: "六层", space: "304", startDate: "2019-01-05", endDate: "2020-09-23", livestatus: "租期已结束" },
    { build: "骏豪中央公园广场E座", floor: "七层", space: "305", startDate: "2019-01-06", endDate: "2020-09-24", livestatus: "租期未开始" },
  ]

  // 报修的数据
  const [baoxiu, setBaoxiu] = useState([]);
  // 报修的表头
  let repairColum = [
    {
      title: '报修人',
      dataIndex: 'name',
      key: 'name',
      render: (text) => {
        return <span style={{ width: 50, whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '报修人手机号',
      dataIndex: 'phone',
      key: 'phone',
      render: (text) => (
        <span style={{ whiteSpace: "nowrap" }}>
          {text}
        </span>
      )
    },
    {
      title: '报修位置',
      dataIndex: 'location',
      key: 'location',
      render: (text) => (
        <span style={{ whiteSpace: "nowrap" }}>
          {text}
        </span>
      )
    },
    {
      title: '报修类型',
      dataIndex: 'type',
      key: 'type',
      render: (text) => (
        <span style={{ whiteSpace: "nowrap" }}>
          {text}
        </span>
      )
    },
    {
      title: '报修详情',
      dataIndex: 'question',
      key: 'question',
      render: (text, record) => {
        return (
          <Tooltip color='#fff' style={{ color: "#000 !important" }} className={term.repairDetail} title={text} placement="top" arrow={arrow}>
            <span
              style={{
                whiteSpace: "nowrap",
                display: "block",
                width: 70,
                overflow: 'hidden',
                textOverflow: "ellipsis",
                cursor: 'pointer',
              }}
              onMouseEnter={() => setArrow(true)} // 鼠标悬停时显示箭头
              onMouseLeave={() => setArrow(false)} // 鼠标移开时隐藏箭头
            >
              {text}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '维修人',
      dataIndex: 'receiver',
      key: 'receiver',
      render: (text) => {
        return <span style={{ whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        let color;
        if (text === "待受理") {
          color = "#000";
        } else if (text === "解决中") {
          color = "#75C476";
        } else if (text === "待解决") {
          color = "#FFB949";
        } else if (text === "已解决") {
          color = "#BDC5D5";
        }
        return (
          <span style={{ whiteSpace: "nowrap", color }}>
            {text}
          </span>
        );
      }

    }
  ]

  // 报修的数据
  let repairData = [
    { repairPerson: "丁总", phone: "15517785342", repairSpace: "租用区域", repairType: "灯具电路", repairSubmitTime: "2019-01-02", repairAdmin: "-", repairState: "待受理" },
    { repairPerson: "丁总", phone: "15517785342", repairSpace: "租用区域", repairType: "厕所漏水", repairSubmitTime: "2019-01-03", repairAdmin: "李师傅", repairState: "解决中" },
    { repairPerson: "丁总", phone: "15517785342", repairSpace: "租用区域", repairType: "厕所漏水", repairSubmitTime: "2019-01-04", repairAdmin: "李师傅", repairState: "待解决" },
    { repairPerson: "丁总", phone: "15517785342", repairSpace: "租用区域", repairType: "厕所漏水", repairSubmitTime: "2019-01-05", repairAdmin: "李师傅", repairState: "已解决" },
    { repairPerson: "丁总", phone: "15517785342", repairSpace: "租用区域", repairType: "厕所漏水", repairSubmitTime: "2019-01-06", repairAdmin: "李师傅", repairState: "待解决" },
  ]

  // 租期明细 抽屉
  const [zuqiDetail, setZuqiDetail] = useState(false);

  // 租期明细删除模态框
  const [zuqiDel, setZuqiDel] = useState(false);

  useEffect(() => {
    // 重新请求明细
    getMingxiData();

  }, []);



  // 存储明细的Id
  let [mingxiId, setMingxiId] = useState(0);
  // 租期明细表头
  const zuhqiCoulms = [
    {
      title: '租住类型',
      dataIndex: 'liveType',
      key: 'liveType',
      render: (text, row) => {


        return <span style={{ whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '所住楼宇',
      dataIndex: 'liveBuild',
      key: 'liveBuild',
      render: (text) => {
        return <span style={{ whiteSpace: "nowrap", whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '所住楼层',
      dataIndex: 'livefloor',
      key: 'livefloor',
      render: (text) => {
        return <div style={{ color: "#8E86EA", whiteSpace: "nowrap" }}>{text}</div>
      }
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
      render: (text) => {
        return <div style={{ width: 80 }}>{text}</div>
      }
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',
      render: (text) => {
        return <span style={{ whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '数据来源',
      dataIndex: 'source',
      key: 'source',
      render: (text) => {
        return <span style={{ whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (text) => {
        return <span style={{ whiteSpace: "nowrap" }}>{text}</span>
      }
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, row) => {
        return <div className={term.caozuoBOX}>
          <img onClick={() => {

          }} className={term.caozuo} src={getImg('/src/assets/images/edit.png')} />
          <img onClick={() => {
            setZuqiDetail(false);
            setZuqiDel(true);
            setMingxiId(row.id);
            setZuqi([]);

          }
          } className={term.caozuo} src={getImg('/src/assets/images/delete.png')} />
        </div >
      }
    }
  ]

  // 删除成功的提示框
  const delSuccessMessage = () => {
    message.open({
      type: 'success',
      content: '删除成功',
      duration: 3,

    });
  };

  // 租期变动明细数据
  let [zuqiActive, setZuqiActive] = useState([]);

  // 封装请求明细
  const getMingxiData = () => {
    axios.get('/api/changezuqi').then(res => {
      setZuqiActive(res.data.data)
    });
  }

  // 新增明细的模态框
  let [addZuqiModal, setAddZuqiModal] = useState(false);

  // 新租下拉框
  let [addBuild, setAddBuild] = useState('');
  let [addFloor, setAddFloor] = useState('');
  let [addSpace, setAddSpace] = useState('');
  let [addStartDate, setAddStartDate] = useState('');
  let [addEndDate, setAddEndDate] = useState('');

  // 添加项为空的提示
  // 提示信息(成功)
  const addNullMsg = () => {
    message.open({
      type: 'danger',
      content: '请输入完整',
      duration: 3,
      style: { color: 'red' },
      icon: <CloseOutlined></CloseOutlined>
    });
  };

  //签约联系人模态框
  const [adLinkModal, setAdLinkModal] = useState(false);

  // 编辑发票模态框
  const [fapiaoModal, setFapiaoModal] = useState(false);
  return (
    <div className={custom.box}>
      <Button onClick={() => {
        setShowModal(true)
      }} className={custom.newcustom}>新建客户</Button>
      <Button onClick={() => {
        setImportModal(true)
      }} className={custom.incustom}>批量导入</Button>
      <div className={custom.top}>
        <div className={custom.topbox}>
          <Input value={clientName}
            onChange={(e) => {
              setClientName(e.target.value)
            }}
            className={custom.cusnameInput} placeholder='请输入客户名称' />
          <div className={custom.show}>
            {!collapsed && (
              <>
                <div className={custom.state}>
                  <span>租期状态</span>
                  <Radio.Group
                    className={custom.radio}
                    options={options}
                  // 使用默认的单选按钮样式
                  />
                </div>
                <div className={custom.row}>
                  <span>曾住最大面积</span>
                  <Input className={custom.input} /> <span>m<sup>2</sup></span>
                  <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>m<sup>2</sup></span>
                </div>
                <div className={custom.row}>
                  <span>已驻天数</span>
                  <Input className={`${custom.inputfir} ${custom.input}`} /> <span>天</span>
                  <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>天</span>
                </div>
                <div className={custom.row}>
                  <span>待驻天数</span>
                  <Input className={`${custom.inputfir} ${custom.input}`} /> <span>天</span>
                  <span className={custom.bolang}>~</span><Input className={`${custom.input} ${custom.day}`} /><span>天</span>
                </div>
              </>
            )}
            <div className={custom.line}>
              <div className={custom.collapseButton} onClick={handleCollapse}>
                <span className={custom.zhankai}>
                  {collapsed ? <div><DownOutlined />展开筛选</div> : <div><UpOutlined />收起筛选</div>}
                </span>
              </div>
            </div>
            <div className={custom.btns}>
              <Button onClick={() => {
                axios.get('/api/customer/sel', {
                  params: {
                    name: clientName
                  }
                }).then(res => {
                  console.log(res);
                  setCustomAllData(res.data.data)
                })
              }} type="primary">查询</Button>
              <Button onClick={() => {
                setClientName('');
                allTableData();
              }} className={custom.rest}>重置</Button>
            </div>
          </div>
        </div>
      </div>
      <div className={custom.bottom}>
        <div className={custom.bottombox}>
          <Table
            columns={columns}
            dataSource={customAllData}
            // 分页器
            pagination={{
              pageSize: 5, // 每页显示5条数据
              total: customAllData.length, // 总数据条数
              showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
              itemRender, // 使用自定义的分页器渲染
              showQuickJumper: true, // 启用快速跳转
            }}
          />
        </div>
      </div>
      {/* 模态框 */}
      <Modal className={custom.modal} footer={null} open={showModal} onCancel={() => setShowModal(false)}>
        <div className={custom.container}>
          <h3>新建客户</h3>
          <div className={custom.modalBorder}></div>

          <h3>客户信息</h3>
          <div className={custom.form}>
            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.star}>*</div>
                <div className={custom.must}>客户名称</div>
              </div>

              <div className={custom.modalInput}>
                <Input onChange={(e) => {
                  setAddName(e.target.value)
                }} value={addName} placeholder='请输入'></Input>
              </div>
            </div>


            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.star}>*</div>
                <div className={custom.must}>客户类型</div>
              </div>

              <div className={custom.modalInput}>
                {/* <Input placeholder='请选择'></Input> */}
                <select className={custom.select} placeholder="请选择" onChange={(e) => {
                  setAddType((e.target.value));

                }}>
                  <option value="请选择">请选择</option>
                  <option value="企业">企业</option>
                  <option value="个人">个人</option>
                </select>
              </div>
            </div>

            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.must}>行业</div>
              </div>

              <div className={custom.modalInput}>
                {/* <Input placeholder='请选择'></Input> */}
                <select className={custom.select} placeholder="请选择">
                  <option value="软件">软件</option>
                  <option value="硬件">硬件</option>
                  <option value="互联网">互联网</option>

                </select>
              </div>
            </div>


            <div className={custom.topBorder}></div>

            <h3>签约联系人</h3>

            <div className={`${custom.item}`}>
              <div className={custom.msg}>
                <div className={custom.must}>联系人姓名</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>


            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.must}>联系人职务</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>


            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员手机号</div>
              </div>
              <div className={` ${custom.modalInput}  ${custom.phone} `}>
                <select className={custom.phoneSelect}>
                  <option value="中国+86">中国+86</option>
                </select>
                <Input placeholder='请输入'></Input>
              </div>
            </div>


            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员邮箱</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>

            <div className={custom.topBorder}></div>
            <h3>租期管理员</h3>

            <div className={`${custom.item}`}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员姓名</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>

            <div className={`${custom.item}`}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员证件号</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>

            <div className={custom.item}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员手机号</div>
              </div>
              <div className={` ${custom.modalInput}  ${custom.phone} `}>
                <select className={custom.phoneSelect}>
                  <option value="中国+86">中国+86</option>
                </select>
                <Input placeholder='请输入'></Input>
              </div>
            </div>

            <div className={`${custom.item}`}>
              <div className={custom.msg}>
                <div className={custom.must}>管理员邮箱</div>
              </div>
              <div className={custom.modalInput}>
                <Input placeholder='请输入'></Input>
              </div>
            </div>


          </div>
          <div className={custom.foot}>
            <Button onClick={() => {
              // 判断必选是否为空
              if (addName == '' || addType == '') {
                console.log(123);


                dangerMessage()
              }
              else {

                axios.post('/api/customer/add', {
                  clientName: addName,
                  clientType: addType
                }).then(res => {
                  console.log(res);
                  setShowModal(false);
                  addSuccessMessage();
                  setAddName('');
                  setAddType('请选择')
                  allTableData();
                })



              }
            }} className={custom.modalSubmit}>保存</Button>
          </div>

        </div>


      </Modal>
      {/* 详情模态框 */}
      <Drawer width={800} height={900}
        className={detail.Drawer} open={showDetail} onClose={() => setShowDetai(false)} closable={false}>
        <div className={detail.container}>
          <div className={detail.top}>
            <div className={detail.topLeft}>
              <span className={detail.title}>{customListRow.clientName}</span>
              <img className={detail.editImg} src={getImg('/src/assets/images/edit.png')} width={14} height={14} alt="" />
            </div>
            <div className={detail.topRight}>
              <span onClick={() => {
                console.log(123);
                setDelModal(true)
                setShowDetai(false)

              }} className={detail.topClose}>删除</span>
            </div>
          </div>
          <div className={detail.Id}>
            <span className={detail.IdFont}>
              客户ID:{customListRow.clientId}
            </span>
          </div>
          <div className={detail.tab}>
            {/* 渲染tab */}
            {tabItem.map((item, index) => {
              return <div key={index}>
                <div onClick={() => {
                  setActive(index)
                  // 租约请求
                  if (index == 1) {
                    axios.get('/api/zuyue').then(res => {
                      console.log(res.data.data);
                      setZuyue(res.data.data)
                    })
                  }
                  // 租期请求
                  else if (index == 2) {
                    axios.get('/api/zuqi').then(res => {
                      console.log(res.data.data);
                      setZuqi(res.data.data)
                    })
                  }
                  // 保修请求
                  else if (index == 4) {
                    axios.get('/api/baoxiu').then(res => {
                      console.log(res.data.data);
                      setBaoxiu(res.data.data);

                    })
                  }
                }}
                  className={index == active ? `${detail.active} ${detail.tabItem}` : `${detail.tabItem}`}>{item}</div>
              </div>
            })}
          </div>
          {/* 判断渲染item  插眼 */}
          {active == 0 &&
            <div>
              <div className={detail.item}>
                <div className={detail.row}>
                  <div>基础资料</div>
                  {/* 编辑基础资料 */}
                  <div onClick={() => {
                    setBasisEditModal(true)
                  }} className={detail.edit}>编辑</div>
                </div>
                <div className={detail.form}>
                  <div className={detail.formItem}>
                    <div className={detail.font}>客户类型</div>
                    <h3 className={detail.weight}>{customListRow.clientType}</h3>
                  </div>

                  <div className={detail.formItem} >
                    <div className={detail.font}>人数规模</div>
                    <h3 className={detail.weight}>{customListRow.peopleScale}人</h3>
                  </div>

                  <div className={detail.formItem}>
                    <div className={detail.font}>行业</div>
                    <h3 className={detail.weight}>{customListRow.clientIndustry}</h3>
                  </div>
                </div>
                <div className={detail.border}></div>
              </div>

              <div className={detail.item}>
                <div className={detail.row}>
                  <div>签约联系人</div>
                  <div onClick={() => {
                    setAdLinkModal(true)
                  }} className={detail.edit}>编辑</div>
                </div>
                <div className={detail.form}>
                  <div className={detail.formItem}>
                    <div className={detail.font}>姓名</div>
                    <h3 className={detail.weight}>{customListRow.name}</h3>
                  </div>

                  <div className={detail.formItem} >
                    <div className={detail.font}>职务</div>
                    <h3 className={detail.weight}>{customListRow.post}</h3>
                  </div>

                  <div className={detail.formItem}>
                    <div className={detail.font}>手机号</div>
                    <h3 className={detail.weight}>+86 &nbsp; {customListRow.phone}</h3>
                  </div>

                  <div className={detail.formItem}>
                    <div className={detail.font}>邮箱</div>
                    <h3 className={detail.weight}>{customListRow.email}</h3>
                  </div>
                </div>
                <div className={detail.border}></div>
              </div>

              <div className={detail.item}>
                <div className={detail.row}>
                  <div>租期管理员</div>
                  <div className={detail.edit}>编辑</div>
                </div>
                <div className={detail.form}>
                  <div className={detail.formItem}>
                    <div className={detail.font}>姓名</div>
                    <h3 className={detail.weight}>{customListRow.adminname}</h3>
                  </div>

                  <div className={detail.formItem} >
                    <div className={detail.font}>证件号</div>
                    <h3 className={detail.weight}>{customListRow.adminIdcard}</h3>
                  </div>

                  <div className={detail.formItem}>
                    <div className={detail.font}>邮箱</div>
                    <h3 className={detail.weight}>{customListRow.adminemail}</h3>
                  </div>
                  <div className={detail.formItem}>
                    <div className={detail.font}>手机号</div>
                    <h3 className={detail.weight}>+86 &nbsp; {customListRow.adminphone}</h3>
                  </div>
                </div>
                <div className={detail.border}></div>
              </div>

              <div className={detail.item}>
                <div className={detail.row}>
                  <div>发票信息</div>
                  <div onClick={() => {
                    setFapiaoModal(true);
                  }} className={detail.edit}>编辑</div>
                </div>
                <div className={detail.form}>
                  <div className={detail.formItem}>
                    <div className={detail.font}>发票类型</div>
                    <h3 className={detail.weight}>{customListRow.clientType}</h3>
                  </div>

                  <div className={detail.formItem} >
                    <div className={detail.font}>纳税人识别号</div>
                    <h3 className={detail.weight}>91110 &nbsp; 10000 &nbsp; 10000 &nbsp; 000</h3>
                  </div>

                  <div className={detail.formItem}>
                    <div className={detail.font}>邮箱</div>
                    <h3 className={detail.weight}>{customListRow.adminemail}</h3>
                  </div>
                  <div className={detail.formItem}>
                    <div className={detail.font}>发票抬头</div>
                    <h3 className={detail.weight}>{customListRow.clientName}</h3>
                  </div>
                  <div className={detail.formItem}>
                    <div className={detail.font}>电话号码</div>
                    <h3 className={detail.weight}>010 &nbsp;510000</h3>
                  </div>
                </div>
              </div>

            </div>
          }

          {active == 1 && <div>
            <Table pagination={false}
              columns={leaseColums}
              dataSource={zuyue}
            ></Table>
          </div>}
          {active == 2 && <div>
            {/* 租期 */}
            <div className={term.box}>
              <div className={term.top}>
                <Button onClick={() => {

                  setAddZuqiModal(true) // 新增的模态框

                }} className={term.newHouse}>+新租</Button>
                <span onClick={() => {
                  setShowDetai(false);
                  setZuqiDetail(true);
                  getMingxiData();
                }} className={term.termActive}>租期变动明细<RightOutlined></RightOutlined></span>
              </div>
              <Table
                columns={termColum}
                dataSource={zuqi}
                className={term.termTable}
                pagination={{
                  pageSize: 5, // 每页显示5条数据
                  total: zuqi.length, // 总数据条数
                  showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
                  itemRender, // 使用自定义的分页器渲染
                  showQuickJumper: true, // 启用快速跳转
                }}
              >

              </Table>

            </div>
          </div>}
          {active == 3 && <div>
            <Toupload></Toupload>
          </div>}
          {active == 4 && <div>
            <Table
              columns={repairColum}
              dataSource={baoxiu}
              className={term.termTable}
              pagination={{
                pageSize: 4, // 每页显示5条数据
                total: baoxiu.length, // 总数据条数
                showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
                itemRender, // 使用自定义的分页器渲染
                showQuickJumper: true, // 启用快速跳转
              }}>
            </Table>
          </div>}
          {active == 5 && <div>
            <Toupload></Toupload>
          </div>}
        </div>
      </Drawer>
      {/* 租期明细 */}
      <Drawer getContainer={false} maskTransitionName={null} transitionName={null} width={920} height={900}
        open={zuqiDetail} onClose={() => setZuqiDetail(false)} closable={false}
      >
        <Table columns={zuhqiCoulms}
          dataSource={zuqiActive}
          pagination={{
            pageSize: 4, // 每页显示4条数据
            total: zuqiActive.length, // 总数据条数
            showTotal: (total, range) => `共${total}条记录,每页${range[1] - range[0] + 1}条`,
            itemRender, // 使用自定义的分页器渲染
            showQuickJumper: true, // 启用快速跳转
          }}
        >

        </Table>
      </Drawer>
      {/* 删除模态框 */}
      <Modal footer={null} open={delModal}
        onCancel={() => {
          setDelModal(false);

        }} className={detail.delModal}>
        <div className={detail.modalBox}>
          <h2 className={detail.modalTitle}>确认删除该客户?</h2>
        </div>
        <div className={detail.modalfoot}>
          <Button className={`${detail.modalBtn} ${detail.modalOk}`} onClick={() => {
            setDelModal(false);
            axios.delete('/api/customer/del', {
              params: {
                id: customListRow.id
              }
            }).then(res => {
              console.log(res);
              // 删除成功提示
              adddeleteMessage();
              allTableData()
            })
          }}>确定</Button>
          <Button className={`${detail.modalBtn}  ${detail.modalCanel}`} onClick={() => {
            setDelModal(false);

          }}>取消</Button>
        </div>
      </Modal>
      {/* 批量导入模态框 */}
      <Modal className={detail.importModal}
        style={{ boxShadow: 'none', padding: 0 }}
        footer={null}
        open={importModal}
        onCancel={() => {
          setImportModal(false)
        }}
      >
        <h2>批量导入客户</h2>
        <div className={detail.importBox}>
          <div className={detail.importBorder}></div>
          <div className={detail.importFont}>
            温馨提示：<br />
            根据模板内的“填写须知”填写客户信息后，将模板Exce上传至此处即可批量导入！
          </div>
          <div className={detail.importDownBox}>
            <Button className={detail.importDown}>下载模板</Button>
          </div>
          <div className={detail.importBorder}></div>
          <div className={detail.importUpload}>
            <div className={detail.importImg}>
              <img src={getImg('/src/assets/images/shape.png')} width={50} height={50} />
              <div>上传文件</div>
            </div>

          </div>
        </div>
      </Modal>
      {/* 编辑个人基础信息模态框 */}
      <Modal
        onCancel={() => {
          setBasisEditModal(false)
        }
        }
        style={{ boxShadow: 'none', padding: 0 }}
        footer={null}
        open={basisEditModal}
        className={detail.basisModa}>
        <h2 className={detail.editBasis}>编辑基础资料</h2>
        <div className={detail.basisModalBox}></div>
        <div className={detail.basisBorder}></div>
        <div className={detail.basisForm}>
          <div className={detail.basisFormItem}>
            <div className={detail.basisHead}>
              <div className={detail.editStar}>*</div>
              <div className={detail.editFont}>客户类型</div>
            </div>
            <select className={detail.editSel}>
              <option value="企业">企业</option>
              <option value="个人">个人</option>
            </select>
          </div>
          <div className={detail.basisFormItem}>
            <div className={detail.basisHead}>
              <div className={detail.editStar}>*</div>
              <div className={detail.editFont}>行业</div>
            </div>
            <select className={detail.editSel}>
              <option value="软件">软件</option>
              <option value="硬件">硬件</option>
              <option value="互联网 ">互联网</option>
            </select>
          </div>
          <div className={detail.basisFormItem}>
            <div className={detail.basisHead}>
              <div className={detail.editStar}>*</div>
              <div className={detail.editFont}>人员规模</div>
            </div>
            <select className={detail.editSel}>
              <option value="50-100人">50-100人</option>
              <option value="100-500人">100-500人</option>
              <option value="500-1000人">500-1000人</option>
            </select>
          </div>
        </div>
        <div className={detail.basisSubmitBox}>
          <Button onClick={() => {
            setBasisEditModal(false);
            basisSuccessMsg()

          }} className={detail.basisSubmit}>保存</Button>
        </div>
      </Modal>
      {/* 删除租期明细模态框 */}
      <Modal className={term.Okdel}
        onCancel={() => setZuqiDel(false)}
        open={zuqiDel}
        footer={null}>
        <div className={term.okdelBox}></div>
        <div className={term.content}>
          <h4 className={term.title}>确定要删除这条租期吗？</h4>
        </div>
        <div className={term.btnBox}>
          <Button className={`${term.btn} ${term.OKbtn}`} onClick={() => {
            // 删除明细请求
            axios.delete('/api/changezuqi/del', {
              params: {
                id: mingxiId
              }
            }).then(res => {
              console.log(res);
              setZuqiDel(false); // 明细模态框关闭
              setZuqiDetail(true); // 显示抽屉
              delSuccessMessage() // 删除成功的提示
              getMingxiData();
            })


          }}>删除</Button>
          <Button onClick={() => {
            setZuqiDel(false); // 关闭模态框
            setZuqiDetail(true); // 显示抽屉

          }} className={`${term.btn} ${term.Cancelbtn}`}>取消</Button>
        </div>
      </Modal>
      {/* 这里新增明细的模态框 */}
      <Modal className={term.addXinzu}
        onCancel={() => setAddZuqiModal(false)}
        open={addZuqiModal}
        footer={null}>
        <div className={term.addXinzuModal}>
          <h3 className={term.addXinzu}>新租</h3>
          <dir className={term.border}></dir>
          <div className={term.form}>
            <div className={term.item}>
              <div className={term.formhead}>
                <div className={term.star}>*</div>
                <div className={term.build}>所在楼宇</div>
              </div>
              <div className={term.selectBox}>
                <select className={term.select} onChange={(e) => {
                  console.log(e.target.value);

                  setAddBuild(e.target.value)
                }}>
                  <option value="请选择">请选择</option>
                  <option value="汤臣一品">汤臣一品</option>
                  <option value="厕所">厕所</option>
                </select>
              </div>
            </div>
            <div className={term.item}>
              <div className={term.formhead}>
                <div className={term.star}>*</div>
                <div className={term.build}>所在楼层</div>
              </div>
              <div className={term.selectBox}>
                <select className={term.select} onChange={(e) => {
                  setAddFloor(e.target.value)
                }}>
                  <option value="请选择">请选择</option>
                  <option value="一楼">一楼</option>
                  <option value="二楼">二楼</option>
                  <option value="三楼">三楼</option>
                  <option value="四楼">四楼</option>
                  <option value="五楼">五楼</option>
                </select>
              </div>
            </div>
            <div className={term.item}>
              <div className={term.formhead}>
                <div className={term.star}>*</div>
                <div className={term.build}>所在楼宇</div>
              </div>
              <div className={term.selectBox}>
                <select className={term.select} onChange={(e) => {
                  setAddSpace(e.target.value)
                }}>
                  <option value="请选择">请选择</option>
                  <option value="丁总空间1">丁总空间1</option>
                  <option value="丁总空间2">丁总空间2</option>
                  <option value="丁总空间3">丁总空间3</option>
                  <option value="丁总空间4">丁总空间4</option>
                  <option value="丁总空间5">丁总空间5</option>
                </select>
              </div>

            </div>
            <div className={term.item}>
              <div className={term.buchong}>
                没有所在空间?立即<span className={term.newBuild}>新建</span>
              </div>
            </div>

          </div>
          <div className={term.border}></div>
          <div className={term.item}>
            <div className={term.formhead}>
              <div className={term.star}>*</div>
              <div className={term.build}>租住开始日期</div>
            </div>

            <div className={term.rili}>
              <div className={`${term.item}  ${term.itemRili}`}>
                <div
                  style={{
                    marginRight: 60
                  }}>
                  <DatePicker onChange={(e) => {
                    console.log(e);
                    setAddStartDate(`${e.$y}-${e.$M}-${e.$D}`);
                  }} placeholder='请选择' style={{
                    marginTop: 20
                  }} />
                </div>
              </div>
              <div className={`${term.item} ${term.itemRili}`}>
                <div
                  style={{
                    marginRight: 60
                  }}>
                  <DatePicker onChange={(e) => {
                    console.log(e);
                    setAddEndDate(`${e.$y}-${e.$M}-${e.$D}`);
                  }} placeholder='请选择' style={{
                    marginTop: 20
                  }} />
                </div>
              </div>
            </div>
            <div className={term.baocunBox}>
              <Button onClick={() => {
                if (addBuild == '' || addFloor == '' || addSpace == '' || addStartDate == '' || addEndDate == '') {
                  addNullMsg();
                }
                else {
                  axios.post('/api/zuqi/add',
                    {
                      build: addBuild,
                      floor: addFloor,
                      space: addSpace,
                      startDate: addStartDate,
                      endDate: addEndDate
                    }
                  ).then(res => {
                    // console.log(res);

                    axios.get('/api/zuqi').then(ress => {
                      console.log(ress);

                      // console.log(res.data.data);
                      setZuqi(ress.data.data)
                    })
                    setAddZuqiModal(false);
                  })

                }
              }} className={term.baocun}>保存</Button>
            </div>
          </div>
        </div>
      </Modal>
      {/* 签约联系人模态框 */}
      <Modal className={term.linkBox} footer={null} open={adLinkModal}
        onCancel={() => {
          setAdLinkModal(false)
        }}>
        <div className={term.linkModal}>
          <h3 className={term.linkTitle}>编辑签约个人身份信息</h3>
          <div className={term.border}></div>
          <div className={term.cart}>
            <div className={term.cartHead}>证件号</div>
            <Input className={term.cartInput} placeholder='请输入证件号'></Input>
          </div>
          <div className={term.zhengjian}>
            <div className={term.cartHead}>证件复印件</div>
            <Upload className={term.up}
              listType="picture-card"
              showUploadList={true}
              style={{ width: 460, height: 146 }}>
              <div className={term.bg}>
                <div className={term.sum}>+</div>
              </div>
            </Upload>
            <div className={term.small}>
              <img src={getImg('/src/assets/images/icon.png')} width={15} height={15} /><span className={term.font}>图片小于500KB，格式为JPG，PNG，GIF</span>
            </div>
            <div className={term.btn}>
              <Button className={term.uploadBtn}>保存</Button>
            </div>
          </div>
        </div>
      </Modal>
      {/*编辑发票信息的模态框 */}
      <Modal className={term.fapiao} footer={null}
        onCancel={() => {
          setFapiaoModal(false)
        }}
        open={fapiaoModal}
      >
        <div className={term.fapiaoBox}>
          <div>
            <h3 className={term.fapiaoTitle}>编辑发票信息</h3>

          </div>
          <div className={term.fapiaoFormItem}>
            <div className={term.fapiaoMust}>*</div>
            <div className={term.fapiaotType}>发票类型</div>
          </div>
          <select className={term.fapiaoSel}>
            <option value="请选择">请选择</option>
            <option value="企业">企业</option>
            <option value="个人">个人</option>
          </select>
          <div className={term.border}></div>

          <div className={term.fapiaoRow}>
            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>发票抬头</div>
                <Input className={term.child}></Input>
              </div>
            </div>

            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>单位地址</div>
                <Input className={term.child}></Input>
              </div>
            </div>
            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>纳税人编号</div>
                <Input className={term.child}></Input>
              </div>
            </div>
            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>电话号码</div>
                <Input className={term.child}></Input>
              </div>
            </div>
            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>开户行</div>
                <Input className={term.child}></Input>
              </div>
            </div>
            <div className={term.fapiaoRowItem}>
              <div className={term.fapiaoHead}>
                <div className={term.fapiaoChild}>银行账户</div>
                <Input className={term.child}></Input>
              </div>
            </div>
          </div>
          <div className={term.foot}>
            <Button className={term.footbtn}>保存</Button>
          </div>
        </div>
      </Modal>
    </div >

  );
};


export default Manage;